<template>
    <div>
        <div class="product-details">
            <div class="header">
                <div class="basicInfoleft">
                    <h1>{{ instrument.instrumentName }}</h1>
                    <ul>
                        <li><span>规格型号:</span> {{ instrument.type }}</li>
                        <li><span>生产厂商:</span> {{ instrument.producer }}</li>
                        <li><span>产地国别:</span> {{ instrument.country }}</li>
                        <li><span>仪器类别:</span> {{ instrument.type }}</li>
                    </ul>
                </div>
                <div class="basicInforight">
                    <img :src="instrument.picture" alt="产品图片" class="product-image" />
                </div>
            </div>
            <div class="section">
                <h2>主要功能</h2>
                <p>{{ instrument.mainFunction }}</p>
            </div>
            <div class="section">
                <h2>技术指标</h2>
                <p>{{ instrument.technicalIndex }}</p>
            </div>
            <div class="section">
                <h2>试样规格</h2>
                <p>{{ instrument.styleSpecification }}</p>
            </div>
            <div class="section">
                <h2>其他</h2>
                <p>{{ instrument.others }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        instrument: {
            type: Object,
            required: true
        }
    },
    methods: {
        handleClose() {
            this.$emit('close');
        }
    }
};
</script>

<style>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.basicInfoleft {
  padding: 10px; /* 可选，为左侧内容添加内边距 */
}

.basicInforight {
  padding: 10px; /* 可选，为右侧内容添加内边距 */
}

.product-details {
    font-family: Arial, sans-serif;
    padding: 20px;
    max-width: 600px;
    margin: auto;
}


.section {
  margin-bottom: 30px;
    
}

.section h2 {
    font-size: 1.5em;
    border-bottom: 2px solid #e5e5e5;
    padding-bottom: 5px;
    margin-bottom: 0px;
}

.section p {
    border: 1px solid #f6f4f4;
    padding: 20px;
    background-color: #f5f5f5;
}
.product-image{
    width: 200px;
    height: 200px;
}
</style>